<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Topcoat</title>
    <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
    <link rel="stylesheet" type="text/css" href="fonts/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="../css/topcoat-mobile-light.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/brackets.css"><!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>
  <body class="light">
    <div id="wrapper">
      <div class="max-width">
        <div id="sideNav">
          <nav class="site">
            <ul>
              <li><a href="http://topcoat.io">Home</a></li>
              <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>
              <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>
              <li><a href="http://topcoat.io/blog">Blog</a></li>
            </ul>
          </nav>
          <div class="combo">
            <select class="docNav">
              <option value="index.html">Topcoat Desktop Dark</option>
              <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>
              <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>
              <option value="topcoat-mobile-light.html" selected="selected">Topcoat Mobile Light</option>
            </select>
          </div>
          <div id="pageNav">
            <ul>
              <li><a href="#button-bar">Button Bar</a></li>
              <li><a href="#large-buttonbar">Large Button Bar</a></li>
              <li><a href="#button">Button</a></li>
              <li><a href="#quiet-button">Quiet Button</a></li>
              <li><a href="#large-button">Large Button</a></li>
              <li><a href="#large-quietbutton">Large Quiet Button</a></li>
              <li><a href="#call-toaction button">Call To Action Button</a></li>
              <li><a href="#large-callto action button">Large Call To Action Button</a></li>
              <li><a href="#checkbox">Checkbox</a></li>
              <li><a href="#icon-button">Icon Button</a></li>
              <li><a href="#quiet-iconbutton">Quiet Icon Button</a></li>
              <li><a href="#large-iconbutton">Large Icon Button</a></li>
              <li><a href="#large-quieticon button">Large Quiet Icon Button</a></li>
              <li><a href="#list">List</a></li>
              <li><a href="#navigation-bar">Navigation Bar</a></li>
              <li><a href="#notification">Notification</a></li>
              <li><a href="#radio-button">Radio Button</a></li>
              <li><a href="#range">Range</a></li>
              <li><a href="#search-input">Search Input</a></li>
              <li><a href="#large-searchinput">Large Search Input</a></li>
              <li><a href="#switch">Switch</a></li>
              <li><a href="#tab-bar">Tab Bar</a></li>
              <li><a href="#text-input">Text input</a></li>
              <li><a href="#large-textinput">Large Text Input</a></li>
              <li><a href="#textarea">Textarea</a></li>
              <li><a href="#large-textarea">Large Textarea</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="site">
        <header id="main-header">
          <div class="max-width">
            <hgroup>
              <h1><a href="http://topcoat.io">Topcoat</a></h1>
              <p>CSS for clean and fast web apps</p>
            </hgroup>
            <nav>
              <ul>
                <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>
                <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>
                <li><a href="http://topcoat.io/blog">Blog</a></li>
                <li><a id="download-btn" href="https://github.com/topcoat/topcoat/archive/v0.8.0.zip" onclick="_gaq.push(['_trackEvent', 'download', 'click',,, false]);">Download</a></li>
              </ul>
            </nav><a id="slide-menu-button" class="topcoat-icon-button--large--quiet"><span class="topcoat-icon--large topcoat-icon--menu-stack"></span></a>
          </div>
        </header>
        <div id="content" class="max-width">
          <article id="button-bar" class="component">
            <header>
              <h2>Button Bar</h2>
            </header>
            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Three</button>  </div></div></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/kdKyg">mobile button bar</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.topcoat-button-bar &gt; .topcoat-button-bar__item:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button,
.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {
  border-right: none;
}

.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button,
.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button--large {
  border-left: none;
}

.topcoat-button-bar__button {
  border-radius: inherit;
}

.topcoat-button-bar__button:focus,
.topcoat-button-bar__button--large:focus {
  z-index: 1;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-buttonbar" class="component">
            <header>
              <h2>Large Button Bar</h2>
            </header>
            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Three</button>  </div></div></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button-bar__button--large {
  border-radius: inherit;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-button:disabled,
.topcoat-button--quiet:disabled,
.topcoat-button--large:disabled,
.topcoat-button--large--quiet:disabled,
.topcoat-button--cta:disabled,
.topcoat-button--large--cta:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="button" class="component">
            <header>
              <h2>Button</h2>
            </header>
            <section class="component"><button class="topcoat-button">Button</button><button class="topcoat-button" disabled>Button</button></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/DpKtf">mobile button</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  padding: 0 1.25rem;
  font-size: 16px;
  line-height: 3rem;
  letter-spacing: 1px;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: top;
  background-color: #e5e9e8;
  box-shadow: inset 0 1px #fff;
  border: 1px solid #9daca9;
  border-radius: 6px;
}

.topcoat-button:hover,
.topcoat-button--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--large--quiet:hover {
  background-color: #eff1f1;
}

.topcoat-button:focus,
.topcoat-button--quiet:focus,
.topcoat-button--quiet:hover:focus,
.topcoat-button--large:focus,
.topcoat-button--large--quiet:focus,
.topcoat-button--large--quiet:hover:focus,
.topcoat-button--cta:focus,
.topcoat-button--large--cta:focus {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  outline: 0;
}

.topcoat-button:active,
.topcoat-button--large:active {
  border: 1px solid #9daca9;
  background-color: #d2d6d6;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="quiet-button" class="component">
            <header>
              <h2>Quiet Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--quiet">Button</button><button class="topcoat-button--quiet" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--quiet&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-button--quiet:hover,
.topcoat-button--large--quiet:hover {
  text-shadow: 0 1px #fff;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
}

.topcoat-button--quiet:active,
.topcoat-button--quiet:focus:active,
.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet:focus:active {
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #d2d6d6;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-button" class="component">
            <header>
              <h2>Large Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--large" >Button</button><button class="topcoat-button--large" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--large,
.topcoat-button--large--quiet {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 4.375rem;
  padding: 0 1.25rem;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-quietbutton" class="component">
            <header>
              <h2>Large Quiet Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--large--quiet" >Button</button><button class="topcoat-button--large--quiet" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--quiet&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="call-toaction button" class="component">
            <header>
              <h2>Call To Action Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--cta" >Button</button><button class="topcoat-button--cta" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--cta,
.topcoat-button--large--cta {
  border: 1px solid #134f7f;
  background-color: #288edf;
  box-shadow: inset 0 1px rgba(255,255,255,0.36);
  color: #fff;
  font-weight: 500;
  text-shadow: 0 -1px rgba(0,0,0,0.36);
}

.topcoat-button--cta:hover,
.topcoat-button--large--cta:hover {
  background-color: #4ca1e4;
}

.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
  background-color: #1e7dc8;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-callto action button" class="component">
            <header>
              <h2>Large Call To Action Button</h2>
            </header>
            <section class="component"><button class="topcoat-button--large--cta" >Button</button><button class="topcoat-button--large--cta" disabled>Button</button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-button--large--cta {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 4.375rem;
  padding: 0 1.25rem;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type=&quot;checkbox&quot;] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.checkbox {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox__label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.checkbox:before,
.checkbox:after {
  content: '';
  position: absolute;
}

.checkbox:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type=&quot;checkbox&quot;] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.checkbox,
.topcoat-checkbox__checkmark {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox__label,
.topcoat-checkbox {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox--disabled,
input[type=&quot;checkbox&quot;]:disabled + .topcoat-checkbox__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.checkbox:before,
.checkbox:after,
.topcoat-checkbox__checkmark:before,
.topcoat-checkbox__checkmark:after {
  content: '';
  position: absolute;
}

.checkbox:before,
.topcoat-checkbox__checkmark:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="checkbox" class="component">
            <header>
              <h2>Checkbox</h2>
            </header>
            <section class="component"><label class="topcoat-checkbox">  <input type="checkbox">  <div class="topcoat-checkbox__checkmark"></div>  Default</label><br><br><label class="topcoat-checkbox">  <input type="checkbox" disabled>  <div class="topcoat-checkbox__checkmark"></div>  Disabled</label></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot;&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Default&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot; disabled&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-checkbox__checkmark {
  height: 2rem;
}

input[type=&quot;checkbox&quot;] {
  height: 2rem;
  width: 2rem;
  margin-top: 0;
  margin-right: -2rem;
  margin-bottom: -2rem;
  margin-left: 0;
}

input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {
  opacity: 1;
}

.topcoat-checkbox {
  line-height: 2rem;
}

.topcoat-checkbox__checkmark:before {
  width: 2rem;
  height: 2rem;
  background: #e5e9e8;
  border: 1px solid #9daca9;
  border-radius: 3px;
  box-shadow: inset 0 1px #fff;
}

.topcoat-checkbox__checkmark {
  width: 2rem;
  height: 2rem;
}

.topcoat-checkbox__checkmark:after {
  top: 1px;
  left: 2px;
  opacity: 0;
  width: 28px;
  height: 11px;
  background: transparent;
  border: 7px solid #454545;
  border-width: 7px;
  border-top: none;
  border-right: none;
  border-radius: 2px;
  -webkit-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

input[type=&quot;checkbox&quot;]:active + .topcoat-checkbox__checkmark:before {
  border: 1px solid #9daca9;
  background-color: #d2d6d6;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:before {
  border: 1px solid #9daca9;
  background: #e5e9e8;
  box-shadow: inset 0 1px #fff;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-icon-button:disabled,
.topcoat-icon-button--quiet:disabled,
.topcoat-icon-button--large:disabled,
.topcoat-icon-button--large--quiet:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="icon-button" class="component">
            <header>
              <h2>Icon Button</h2>
            </header>
            <section class="component"><button class="topcoat-icon-button">  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span></button><button class="topcoat-icon-button" disabled>  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span></button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  padding: 0 0.75rem;
  line-height: 3rem;
  letter-spacing: 1px;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: baseline;
  background-color: #e5e9e8;
  box-shadow: inset 0 1px #fff;
  border: 1px solid #9daca9;
  border-radius: 6px;
}

.topcoat-icon-button:hover,
.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large:hover,
.topcoat-icon-button--large--quiet:hover {
  background-color: #eff1f1;
}

.topcoat-icon-button:focus,
.topcoat-icon-button--quiet:focus,
.topcoat-icon-button--quiet:hover:focus,
.topcoat-icon-button--large:focus,
.topcoat-icon-button--large--quiet:focus,
.topcoat-icon-button--large--quiet:hover:focus {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  outline: 0;
}

.topcoat-icon-button:active,
.topcoat-icon-button--large:active {
  border: 1px solid #9daca9;
  background-color: #d2d6d6;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="quiet-iconbutton" class="component">
            <header>
              <h2>Quiet Icon Button</h2>
            </header>
            <section class="component"><button class="topcoat-icon-button--quiet">  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span></button><button class="topcoat-icon-button--quiet" disabled>  <span class="topcoat-icon" style="background-color:#A5A7A7;"></span></button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-icon-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large--quiet:hover {
  text-shadow: 0 1px #fff;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
}

.topcoat-icon-button--quiet:active,
.topcoat-icon-button--quiet:focus:active,
.topcoat-icon-button--large--quiet:active,
.topcoat-icon-button--large--quiet:focus:active {
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #d2d6d6;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-iconbutton" class="component">
            <header>
              <h2>Large Icon Button</h2>
            </header>
            <section class="component"><button class="topcoat-icon-button--large">  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span></button><button class="topcoat-icon-button--large" disabled>  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span></button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  width: 4.375rem;
  height: 4.375rem;
  line-height: 4.375rem;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-quieticon button" class="component">
            <header>
              <h2>Large Quiet Icon Button</h2>
            </header>
            <section class="component"><button class="topcoat-icon-button--large--quiet">  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span></button><button class="topcoat-icon-button--large--quiet" disabled>  <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span></button></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-icon-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-icon,
.topcoat-icon--large {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 1.62rem;
  height: 1.62rem;
  vertical-align: middle;
  top: -1px;
}

.topcoat-icon--large {
  width: 2.499999998125rem;
  height: 2.499999998125rem;
  top: -2px;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.input {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
}

.input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.list {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.list__header {
  margin: 0;
}

.list__container {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.list__item {
  margin: 0;
  padding: 0;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.list,
.topcoat-list {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.list__header,
.topcoat-list__header {
  margin: 0;
}

.list__container,
.topcoat-list__container {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.list__item,
.topcoat-list__item {
  margin: 0;
  padding: 0;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="list" class="component">
            <header>
              <h2>List</h2>
            </header>
            <section class="component"><div class="topcoat-list">  <h3 class="topcoat-list__header">Category</h3>  <ul class="topcoat-list__container">    <li class="topcoat-list__item">      Item    </li>    <li class="topcoat-list__item">      Item    </li>    <li class="topcoat-list__item">      Item    </li>  </ul></div></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-list&quot;&gt;  &lt;h3 class=&quot;topcoat-list__header&quot;&gt;Category&lt;/h3&gt;  &lt;ul class=&quot;topcoat-list__container&quot;&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-list {
  border-top: 1px solid #9daca9;
  border-bottom: 1px solid #fff;
  background-color: #e5e9e8;
}

.topcoat-list__header {
  padding: 4px 20px;
  font-size: 0.9em;
  font-weight: 400;
  background-color: #d2d6d6;
  color: #454545;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  border-top: 1px solid rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.23);
}

.topcoat-list__container {
  border-top: 1px solid #9daca9;
  color: #454545;
}

.topcoat-list__item {
  padding: 1.25rem;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #9daca9;
}

.topcoat-list__item:first-child {
  border-top: 1px solid #d6dcdb;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.navigation-bar {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navigation-bar__item {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

.navigation-bar__title {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.navigation-bar,
.topcoat-navigation-bar {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navigation-bar__item,
.topcoat-navigation-bar__item {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

.navigation-bar__title,
.topcoat-navigation-bar__title {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="navigation-bar" class="component">
            <header>
              <h2>Navigation Bar</h2>
            </header>
            <section class="component"><div class="topcoat-navigation-bar">    <div class="topcoat-navigation-bar__item center full">        <h1 class="topcoat-navigation-bar__title">Header</h1>    </div></div></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-navigation-bar&quot;&gt;    &lt;div class=&quot;topcoat-navigation-bar__item center full&quot;&gt;        &lt;h1 class=&quot;topcoat-navigation-bar__title&quot;&gt;Header&lt;/h1&gt;    &lt;/div&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-navigation-bar {
  height: 4.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background: #e5e9e8;
  color: #454545;
  box-shadow: inset 0 -1px #9daca9, 0 1px #d6dcdb;
}

.topcoat-navigation-bar__item {
  margin: 0;
  line-height: 4.375rem;
  vertical-align: top;
}

.topcoat-navigation-bar__title {
  font-size: 1.3rem;
  font-weight: 400;
  color: #454545;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.notification {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.notification,
.topcoat-notification {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="notification" class="component">
            <header>
              <h2>Notification</h2>
            </header>
            <section class="component"><span class="topcoat-notification">1</span></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;span class=&quot;topcoat-notification&quot;&gt;1&lt;/span&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-notification {
  padding: 0.15em 0.5em 0.2em;
  border-radius: 2px;
  background-color: #ec514e;
  color: #fff;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type=&quot;radio&quot;] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.radio-button {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button__label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button:before,
.radio-button:after {
  content: '';
  position: absolute;
  border-radius: 100%;
}

.radio-button:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.radio-button:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.radio-button--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type=&quot;radio&quot;] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.radio-button,
.topcoat-radio-button__checkmark {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button__label,
.topcoat-radio-button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-button:before,
.radio-button:after,
.topcoat-radio-button__checkmark:before,
.topcoat-radio-button__checkmark:after {
  content: '';
  position: absolute;
  border-radius: 100%;
}

.radio-button:after,
.topcoat-radio-button__checkmark:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.radio-button:before,
.topcoat-radio-button__checkmark:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.radio-button--disabled,
input[type=&quot;radio&quot;]:disabled + .topcoat-radio-button__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="radio-button" class="component">
            <header>
              <h2>Radio Button</h2>
            </header>
            <section class="component"><!-- NO LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- LEFT LABEL --><label class="topcoat-radio-button">  Left label  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- RIGHT LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div>  Right label</label><br><br><!-- DISABLED --><label class="topcoat-radio-button">  <input type="radio" name="topcoat" Disabled>  <div class="topcoat-radio-button__checkmark"></div>  Disabled</label></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/HDcJj">Mobile Radio Button</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;!-- NO LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- LEFT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  Left label  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- RIGHT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Right label&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- DISABLED --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot; Disabled&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
input[type=&quot;radio&quot;] {
  height: 1.875rem;
  width: 1.875rem;
  margin-top: 0;
  margin-right: -1.875rem;
  margin-bottom: -1.875rem;
  margin-left: 0;
}

input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {
  opacity: 1;
}

.topcoat-radio-button {
  color: #454545;
  line-height: 1.875rem;
}

.topcoat-radio-button__checkmark:before {
  width: 1.875rem;
  height: 1.875rem;
  background: #e5e9e8;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
}

.topcoat-radio-button__checkmark {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
}

.topcoat-radio-button__checkmark:after {
  opacity: 0;
  width: 0.875rem;
  height: 0.875rem;
  background: #454545;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 1px rgba(255,255,255,0.5);
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  top: 7px;
  left: 7px;
}

input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

input[type=&quot;radio&quot;]:active + .topcoat-radio-button__checkmark:before {
  border: 1px solid #9daca9;
  background-color: #d2d6d6;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

input[type=&quot;radio&quot;]:disabled:active + .topcoat-radio-button__checkmark:before {
  border: 1px solid #9daca9;
  background: #e5e9e8;
  box-shadow: inset 0 1px #fff;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.range {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

.range__thumb {
  cursor: pointer;
}

.range__thumb--webkit {
  cursor: pointer;
  -webkit-appearance: none;
}

.range:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.range,
.topcoat-range {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

.range__thumb,
.topcoat-range::-moz-range-thumb {
  cursor: pointer;
}

.range__thumb--webkit,
.topcoat-range::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
}

.range:disabled,
.topcoat-range:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="range" class="component">
            <header>
              <h2>Range</h2>
            </header>
            <section class="component"><input type="range" class="topcoat-range"><input type="range" class="topcoat-range" disabled></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/BskEn">mobile range</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot;&gt;&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot; disabled&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-range {
  border-radius: 6px;
  border: 1px solid #9daca9;
  background-color: #d6dcdb;
  height: 1rem;
  border-radius: 30px;
}

.topcoat-range::-moz-range-track {
  border-radius: 6px;
  border: 1px solid #9daca9;
  background-color: #d6dcdb;
  height: 1rem;
  border-radius: 30px;
}

.topcoat-range::-webkit-slider-thumb {
  height: 3rem;
  width: 2rem;
  background-color: #e5e9e8;
  border: 1px solid #9daca9;
  border-radius: 6px;
  box-shadow: inset 0 1px #fff;
}

.topcoat-range::-moz-range-thumb {
  height: 3rem;
  width: 2rem;
  background-color: #e5e9e8;
  border: 1px solid #9daca9;
  border-radius: 6px;
  box-shadow: inset 0 1px #fff;
}

.topcoat-range:focus::-webkit-slider-thumb {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

.topcoat-range:focus::-moz-range-thumb {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}

.topcoat-range:active::-webkit-slider-thumb {
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
}

.topcoat-range:active::-moz-range-thumb {
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.search-input {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

input[type=&quot;search&quot;]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.search-input,
.topcoat-search-input,
.topcoat-search-input--large {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

input[type=&quot;search&quot;]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-input:disabled,
.topcoat-search-input:disabled,
.topcoat-search-input--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="search-input" class="component">
            <header>
              <h2>Search Input</h2>
            </header>
            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input"><input type="search" value="" placeholder="search" class="topcoat-search-input" disabled></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot; disabled&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-search-input,
.topcoat-search-input--large {
  line-height: 3rem;
  height: 3rem;
  font-size: 16px;
  border: 1px solid #9daca9;
  background-color: #fff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);
  color: #454545;
  padding: 0 0 0 2rem;
  border-radius: 30px;
  background-image: url(&quot;../img/search.svg&quot;);
  background-position: 1rem center;
  background-repeat: no-repeat;
  background-size: 16px;
}

.topcoat-search-input:focus,
.topcoat-search-input--large:focus {
  background-color: #fff;
  color: #454545;
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), 0 0 0 2px #6fb5f1;
}

.topcoat-search-input::-webkit-search-cancel-button,
.topcoat-search-input::-webkit-search-decoration,
.topcoat-search-input--large::-webkit-search-cancel-button,
.topcoat-search-input--large::-webkit-search-decoration {
  margin-right: 5px;
}

.topcoat-search-input:focus::-webkit-input-placeholder,
.topcoat-search-input:focus::-webkit-input-placeholder {
  color: #c6c8c8;
}

.topcoat-search-input:disabled::-webkit-input-placeholder {
  color: #454545;
}

.topcoat-search-input:disabled::-moz-placeholder {
  color: #454545;
}

.topcoat-search-input:disabled:-ms-input-placeholder {
  color: #454545;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-searchinput" class="component">
            <header>
              <h2>Large Search Input</h2>
            </header>
            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input--large"><input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot; disabled&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-search-input--large {
  line-height: 4.375rem;
  height: 4.375rem;
  font-size: 1.3rem;
  font-weight: 400;
  padding: 0 0 0 2.9rem;
  border-radius: 40px;
  background-position: 1.2rem center;
  background-size: 1.3rem;
}

.topcoat-search-input--large:disabled {
  color: #454545;
}

.topcoat-search-input--large:disabled::-webkit-input-placeholder {
  color: #454545;
}

.topcoat-search-input--large:disabled::-moz-placeholder {
  color: #454545;
}

.topcoat-search-input--large:disabled:-ms-input-placeholder {
  color: #454545;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch__input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.switch__toggle {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch__toggle:before,
.switch__toggle:after {
  content: '';
  position: absolute;
  z-index: -1;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.switch,
.topcoat-switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch__input,
.topcoat-switch__input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.switch__toggle,
.topcoat-switch__toggle {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch__toggle:before,
.switch__toggle:after,
.topcoat-switch__toggle:before,
.topcoat-switch__toggle:after {
  content: '';
  position: absolute;
  z-index: -1;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.switch--disabled,
.topcoat-switch__input:disabled + .topcoat-switch__toggle {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="switch" class="component">
            <header>
              <h2>Switch</h2>
            </header>
            <section class="component"><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input">  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" checked>  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" disabled>  <div class="topcoat-switch__toggle"></div></label></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/upxds">mobile switch</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot;&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; checked&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; disabled&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-switch {
  font-size: 16px;
  padding: 0 1.25rem;
  border-radius: 6px;
  border: 1px solid #9daca9;
  overflow: hidden;
  width: 6rem;
}

.topcoat-switch__toggle:before,
.topcoat-switch__toggle:after {
  top: -1px;
  width: 5rem;
}

.topcoat-switch__toggle:before {
  content: 'ON';
  color: #288edf;
  background-color: #e5f1fb;
  right: 1rem;
  padding-left: 1.5rem;
}

.topcoat-switch__toggle {
  line-height: 3rem;
  height: 3rem;
  width: 2rem;
  border-radius: 6px;
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #e5e9e8;
  border: 1px solid #9daca9;
  margin-left: -1.3rem;
  margin-bottom: -1px;
  margin-top: -1px;
  box-shadow: inset 0 1px #fff;
  -webkit-transition: margin-left 0.05s ease-in-out;
  transition: margin-left 0.05s ease-in-out;
}

.topcoat-switch__toggle:after {
  content: 'OFF';
  background-color: #d2d6d6;
  left: 1rem;
  padding-left: 2rem;
}

.topcoat-switch__input:checked + .topcoat-switch__toggle {
  margin-left: 2.7rem;
}

.topcoat-switch__input:active + .topcoat-switch__toggle {
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
}

.topcoat-switch__input:focus + .topcoat-switch__toggle {
  border: 1px solid #0036ff;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,
.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {
  background: transparent;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-tab-bar__button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-tab-bar__button:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.button-bar,
.topcoat-tab-bar {
  display: table;
  table-layout: fixed;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.button-bar__item,
.topcoat-tab-bar__item {
  display: table-cell;
  width: auto;
  border-radius: 0;
}

.button-bar__item &gt; input,
.topcoat-tab-bar__item &gt; input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.button-bar__button {
  border-radius: inherit;
}

.button-bar__item:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="tab-bar" class="component">
            <header>
              <h2>Tab Bar</h2>
            </header>
            <section class="component"><div class="topcoat-tab-bar">  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">One</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Two</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Three</button>  </label></div></section>
            <section class="examples">
              <h4>Examples</h4>
              <ul>
                <li><a href="http://codepen.io/Topcoat/pen/rJICF">mobile tab bar</a></li>
              </ul>
            </section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-tab-bar&quot;&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/label&gt;&lt;/div&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-tab-bar__button {
  padding: 0 1.25rem;
  height: 3rem;
  line-height: 3rem;
  letter-spacing: 1px;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: top;
  background-color: #e5e9e8;
  box-shadow: inset 0 1px #fff;
  border-top: 1px solid #9daca9;
}

.topcoat-tab-bar__button:active,
.topcoat-tab-bar__button--large:active,
:checked + .topcoat-tab-bar__button {
  color: #288edf;
  background-color: #e5f1fb;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
}

.topcoat-tab-bar__button:focus,
.topcoat-tab-bar__button--large:focus {
  z-index: 1;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  outline: 0;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.input,
.topcoat-text-input,
.topcoat-text-input--large {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
}

.input:disabled,
.topcoat-text-input:disabled,
.topcoat-text-input--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="text-input" class="component">
            <header>
              <h2>Text input</h2>
            </header>
            <section class="component"><input type="text" class="topcoat-text-input" placeholder="text" value=""><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="" disabled><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail"></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-text-input,
.topcoat-text-input--large {
  line-height: 3rem;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 0 1.25rem;
  border: 1px solid #9daca9;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
  color: #454545;
  vertical-align: top;
}

.topcoat-text-input:focus,
.topcoat-text-input--large:focus {
  background-color: #fff;
  color: #454545;
  border: 1px solid #0036ff;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-text-input:disabled::-webkit-input-placeholder {
  color: #454545;
}

.topcoat-text-input:disabled::-moz-placeholder {
  color: #454545;
}

.topcoat-text-input:disabled:-ms-input-placeholder {
  color: #454545;
}

.topcoat-text-input:invalid {
  border: 1px solid #ec514e;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-textinput" class="component">
            <header>
              <h2>Large Text Input</h2>
            </header>
            <section class="component"><input type="text" class="topcoat-text-input--large" value="" placeholder="text"><br><br><input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled><br><br><input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail"></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-text-input--large {
  line-height: 4.375rem;
  font-size: 1.3rem;
}

.topcoat-text-input--large:disabled {
  color: #454545;
}

.topcoat-text-input--large:disabled::-webkit-input-placeholder {
  color: #454545;
}

.topcoat-text-input--large:disabled::-moz-placeholder {
  color: #454545;
}

.topcoat-text-input--large:disabled:-ms-input-placeholder {
  color: #454545;
}

.topcoat-text-input--large:invalid {
  border: 1px solid #ec514e;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.textarea {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  resize: none;
  outline: none;
}

.textarea:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.textarea,
.topcoat-textarea,
.topcoat-textarea--large {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  resize: none;
  outline: none;
}

.textarea:disabled,
.topcoat-textarea:disabled,
.topcoat-textarea--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="textarea" class="component">
            <header>
              <h2>Textarea</h2>
            </header>
            <section class="component"><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-textarea,
.topcoat-textarea--large {
  padding: 2rem;
  font-size: 2.5rem;
  font-weight: 400;
  border-radius: 6px;
  line-height: 3rem;
  border: 1px solid #9daca9;
  background-color: #fff;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
  color: #454545;
  letter-spacing: 1px;
}

.topcoat-textarea:focus,
.topcoat-textarea--large:focus {
  background-color: #fff;
  color: #454545;
  border: 1px solid #0036ff;
  box-shadow: 0 0 0 2px #6fb5f1;
}

.topcoat-textarea:disabled::-webkit-input-placeholder {
  color: #454545;
}

.topcoat-textarea:disabled::-moz-placeholder {
  color: #454545;
}

.topcoat-textarea:disabled:-ms-input-placeholder {
  color: #454545;
}
</code></pre>
                </div>
              </section>
            </footer>
          </article>
          <article id="large-textarea" class="component">
            <header>
              <h2>Large Textarea</h2>
            </header>
            <section class="component"><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>
            <footer>
              <div class="showcode"><a href="#">Show code snippets</a></div>
              <section class="code">
                <div>
                  <h3>HTML</h3>
                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>
                </div>
                <div>
                  <h3>CSS</h3>
                  <pre class="css"><code data-language="css">
.topcoat-textarea--large {
  font-size: 3rem;
  line-height: 4.375rem;
}

.topcoat-textarea--large:disabled {
  color: #454545;
}

.topcoat-textarea--large:disabled::-webkit-input-placeholder {
  color: #454545;
}

.topcoat-textarea--large:disabled::-moz-placeholder {
  color: #454545;
}

.topcoat-textarea--large:disabled:-ms-input-placeholder {
  color: #454545;
}

@font-face {
  font-family: &quot;Source Sans&quot;;
  src: url(&quot;../font/SourceSansPro-Regular.otf&quot;);
}

@font-face {
  font-family: &quot;Source Sans&quot;;
  src: url(&quot;../font/SourceSansPro-Light.otf&quot;);
  font-weight: 200;
}

@font-face {
  font-family: &quot;Source Sans&quot;;
  src: url(&quot;../font/SourceSansPro-Semibold.otf&quot;);
  font-weight: 600;
}

body {
  margin: 0;
  padding: 0;
  background: #dfe2e2;
  color: #000;
  font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;
  font-weight: 400;
}

:focus {
  outline-color: transparent;
  outline-style: none;
}

.topcoat-icon--menu-stack {
  background: url(&quot;../img/hamburger_dark.svg&quot;) no-repeat;
  background-size: cover;
}

.quarter {
  width: 25%;
}

.half {
  width: 50%;
}

.three-quarters {
  width: 75%;
}

.third {
  width: 33.333%;
}

.two-thirds {
  width: 66.666%;
}

.full {
  width: 100%;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.reset-ui {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* This file should include color and image variables corresponding to the dark theme */

/* ---------- colors ---------- */

/* ---------- darken ---------- */

/* ---------- lighten ---------- */

/* ---------- alphas ---------- */

/* ---------- thickness ---------- */

/* ---------- shadows ---------- */

/* Icons */

/* Navigation Bar */

/* Text Input */

/* List */

/* Overlay */

/* Progress bar */

/* Checkbox */

/* Range input */

/* Radio Button */

/* Tab bar */

/* Switch */

/* Icon Button */

/* Navigation bar */

/* List */

/* Search Input */

/* Textarea */

/* Checkbox */

/* Radio */

/* Range input */

/* Search Input */

/* Switch */

/* This file should include color and image variables corresponding to the light theme */

/* ---------- colors ---------- */

/* ---------- darken ---------- */

/* ---------- lighten ---------- */

/* ---------- alphas ---------- */

/* ---------- thickness ---------- */

/* ---------- shadows ---------- */

/* Secondary colors (based on colors above)

Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!

*/

/* Icons */

/* Navigation Bar */

/* Text Input */

/* List */

/* Overlay */

/* Progress bar */

/* Checkbox */

/* Range input */

/* Radio Button */

/* Tab bar */

/* Switch */

/* Containers */

/* Icon Button */

/* Navigation bar */

/* List */

/* Search Input */

/* Text Area */

/* Checkbox */

/* Radio */

/* Range input */

/* Search Input */

/* Switch */

/* Call To Action */

/* Text Input */

/* Radio input */

/* Overlay */

/* Textarea */

/* Progress bar container */

/* Progress bar progress */

/* Switch */

/* Notification */

/* Search */</code></pre>
                </div>
              </section>
            </footer>
          </article>
        </div>
        <footer></footer>
      </div>
    </div>
    <script src="js/rainbow-custom.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>